<%@page import="cn.egame.interfaces.gc.TerminalInfo"%>
<%@page import="cn.egame.interfaces.EnumType.AppParameterType"%>
<%@page import="cn.egame.common.util.Utils"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="java.util.*"%>
<%@page import="cn.egame.interfaces.pu.AppParameter"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	List<String[]> brandMap = new ArrayList<String[]>();
	if(request.getAttribute("brandList") != null) {
		brandMap = (List<String[]>)request.getAttribute("brandList");	
	}
	
	Set<TerminalInfo> terminalInfoList = new HashSet<TerminalInfo>();
	if(request.getAttribute("terminalInfoList") != null) {
		terminalInfoList = (Set<TerminalInfo>)request.getAttribute("terminalInfoList");	
	}
	
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet"
	href="<%=request.getContextPath()%>/css/main.css" />
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/common.js"></script>
<title>新增机型组</title>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	var listRelatedAry = new Array();
	var listAry = new Array();
	
	function Opt(val, text){ 
	    this.val = val; 
	    this.text = text;
	} 
	
	Array.prototype.removeObj = function(obj) {
		if(!(obj instanceof Opt))
			return;
		for(var i=0; i<this.length; i++){
			if(this[i].val==obj.val && this[i].text==obj.text){
				this.splice(i,1);
			}
		}
	}
	
	$(function(){
		//页面展现前将未适配的机型组进行保存
		$("#fromTerminal option").each(function(){
			var opt = new Opt($(this).val(), $(this).text());
			listAry.push(opt);
		});
		//页面展现前将已经适配的机型组进行保存
		$("#toTerminal option").each(function(){
			var opt = new Opt($(this).val(), $(this).text());
			listRelatedAry.push(opt);
		});
	});
	
	function isTerminalGroupExist(){
		var exist = true;
		$.ajax({			
			url : "<%=request.getContextPath() + "/tv/terminalgroup/checkExist.do" %>",
			type : 'post',
			data : {
				'name' : $("#name").val(),
				'id' : $("#id").val()
			},
			success:function (data) {
				if (data.retCode == "success" && data.exist=="notExist") {
					exist = false;
				}
			}, 
			error:function () {
				alert("error");
			},
			async : false
		});
		return exist;
	}
	
	function checkName(){
		var td = $("#form1").find("td[name='notnone']");
		if($(td).find("input").val() == "" || $(td).find("input").val().length>20){
			$(td).find("span").remove();
			$(td).append("<span class='page_tip'>*必填，最多20个汉字字符</span>");
			$(td).focus();
			return false;
		}else{
			$(td).find("span").remove();
		}
		return true;
	}
	
	function checkRemark(){
		var td = $("#form1").find("td[name='max20']");
		if($(td).find("input").val().length>20){
			$(td).find("span").remove();
			$(td).append("<span class='page_tip'>最多20个汉字字符</span>");
			$(td).focus();
			return false;
		}else{
			$(td).find("span").remove();
		}
		return true;
	}
	function sub(){
		$("#name").val($.trim($("#name").val()));
		$("#remark").val($.trim($("#remark").val()));
		var ck = checkName() & checkRemark();
		if(ck){
			if(!isTerminalGroupExist()){
				//将管理的机型的select中的id处理下提交
				var ids = getRelatedIdsList().join(",");
				$("#relatedIds").val(ids);
				$("#form1").submit();
			}else{
				var td = $("#form1").find("td[name='notnone']");
				$(td).find("span").remove();
				$(td).append("<span class='page_tip'>组名已经存在</span>");
				$(td).focus;
			}
		}
	}
	
	function back(){
		window.history.back();
	}
	
	function filterTerminal(){
		$("#fromTerminal").empty();
		var brand = $("#brand").val();
		var brandName1 = "";
		var brandName2 = "";
		if(brand != 0){
			var brandText = $("#brand option:selected").text();
			var brandNameAry = brandText.split("-");
			brandName1 =  brandNameAry[0].toLowerCase();
			brandName2 =  brandNameAry[1].toLowerCase();
		}
		$("#fromName").val($.trim($("#fromName").val()));
		var fromName = $("#fromName").val().toLowerCase();
		if(fromName==null || fromName==undefined){
			fromName = "";
		}
		for(var i=0; i<listAry.length; i++){
			var text = listAry[i].text.toLowerCase();
			if(text.indexOf(fromName)!=-1 && (text.indexOf(brandName1)!=-1
					|| text.indexOf(brandName2)!=-1)){
				addOption("fromTerminal", listAry[i].val, listAry[i].text);
			}
		}
	}
	
	function filterTerminalRelated(){
		$("#toTerminal").empty();
		$("#toName").val($.trim($("#toName").val()));
		var toName = $("#toName").val().toLowerCase();
		if(toName==null || toName==undefined){
			toName = "";
		}
		for(var i=0; i<listRelatedAry.length; i++){
			if(listRelatedAry[i].text.toLowerCase().indexOf(toName)!=-1){
				addOption("toTerminal", listRelatedAry[i].val, listRelatedAry[i].text);
			}
		}
	}
	
	function addRelatedTerminal() {	
		checkValue("fromTerminal");				
		var fromOptions = document.getElementById("fromTerminal");
		var toOptions = document.getElementById("toTerminal");
		for(var i=0;i<fromOptions.length;i++){
			if(fromOptions[i].selected == true){
				var opt = new Opt(fromOptions[i].value, fromOptions[i].text);
				toOptions.options.add(new Option(fromOptions[i].text,fromOptions[i].value));
				listRelatedAry.push(opt);
				fromOptions.remove(i);
				listAry.removeObj(opt);
				--i;
			}
		}
	}
	
	function deleteRelatedTerminal() {	
		checkValue("toTerminal");				
		var fromOptions = document.getElementById("fromTerminal");
		var toOptions = document.getElementById("toTerminal");
		for(var i=0;i<toOptions.length;i++){
			if(toOptions[i].selected == true){
				var opt = new Opt(toOptions[i].value, toOptions[i].text);
				fromOptions.options.add(new Option(toOptions[i].text,toOptions[i].value));
				listAry.push(opt);
				toOptions.remove(i);
				listRelatedAry.removeObj(opt);
				--i;
			}
		}
	}
	
	function checkValue(terminalIds){
		terminalIdsValue = getOptionValueList(terminalIds);
		if(terminalIdsValue == null || terminalIdsValue == ""){
			alert("请选择机型");
			return;
		}
	}
	function getOptionValueList(selectId){
		var options = document.getElementById(selectId);
		var result = new Array();
		for(var i=0;i<options.length;i++){
			if(options[i].selected == true){
				result.push(options[i].value);
			}
		}
		return result;
	}
	
	function addOption(selectId, val, text){
		var select = document.getElementById(selectId);
		select.options.add(new Option(text, val));
	}
	
	function getRelatedIdsList(){
		var relatedIdsAry = new Array();
		for(var i=0; i<listRelatedAry.length; i++){
			relatedIdsAry.push(listRelatedAry[i].val);
		}
		return relatedIdsAry;
	}
	
</script>
</head>
<body>
	<form action="<%=request.getContextPath() + "/tv/terminalgroup/set.do"%>"
		method="post" id="form1">
		<input type="hidden" name="relatedIds" id="relatedIds" value="">
		<div class="matter_box">
			<h3 class="nopoint"><strong>TV产品&gt;机型组管理&gt;新增机型组</strong></h3>
			<div class="mt10 pt10 clearfix">
				<div style="width: 60%; margin: 0px auto;">
					<table>
						<tr>
							<td style="text-align: right; width: 15%">机型组名称:</td>
							<td name="notnone" style="text-align: left;width: 55%;">
								<input type=text name="name" id="name" maxlength="20">
							</td>
							<td style="text-align: right;width: 15%;">备注:</td>
							<td name="max20" style="text-align: left;width: 15%;">
								<input type=text name="remark" id="remark" maxlength="20">
							</td>
						</tr>
					</table>
				</div>
				<div style="height: 30px"></div>
				<div style="width: 55%; margin: 0px auto;">
					<table>
						<tr>
							<td style="width: 48%;text-align: right;">
								<div>
									<table>
										<caption style="text-align: center;">
											<strong>待关联机型组</strong>
										</caption>
										<tr>
											<td>品牌：</td>
											<td>
												<select name="brand" id="brand" style="width: 160px;">
													<option value="0">请选择</option>
														<%  if(brandMap != null){          					
										          				for(String[] brand:brandMap) { 
										       						if(brand.length==3){
										       			%>          					
										       					<option value="<%=brand[0] %>"><%=brand[1] %>-<%=brand[2] %></option>
									          			<%	
									          						}}
										          			}
									          			%>
												</select>
											</td>
										</tr>
										<tr>
											<td>客户端UA：</td>												
											<td>
												<input type=text name="fromName" id="fromName" style="width: 100px;">
												<input class="upload_btn" type="button" value="查询" onclick="filterTerminal()">
											</td>
										</tr>
										<tr>
											<td colspan="2">
												<select id = "fromTerminal" name = "fromTerminal" multiple="multiple" size=12 style="width: 100%">
													<%
															if(terminalInfoList != null){
																for(TerminalInfo bean:terminalInfoList){
																	%>																		
																	<option value="<%=bean.getTerminalId() %>" 
																		><%=bean.getUACode() %></option>
																	<%
																	}
																}
															%>
												</select>
											</td>
										</tr>
									</table>
								</div>
							</td>
							<td style="width: 4%;">
								<div style="margin: 0px auto;">
									<input type=button value="添加 >" class="btn3"  onclick="addRelatedTerminal()"> <br/>
									<input type="button" class="btn3" onclick="deleteRelatedTerminal()" value="< 删除"><br/>
								</div>
							</td>
							<td style="width: 48%;text-align: right;">
								<div>
									<table>
										<caption  style="text-align: center;">
											<strong>已关联机型组</strong>
										</caption>
										<tr>
											<td>
												客户端UA：
												<input type=text name="toName" id="toName" style="width: 100px;">
												<input type="button" class="upload_btn" value="查询" onclick="filterTerminalRelated()">
											</td>
										</tr>
										<tr>
											<td style="height: 20px"></td>
										</tr>
										<tr>
											<td>
												<select id = "toTerminal" name = "toTerminal" multiple="multiple" size="12" style="width: 100%;">
												</select>
											</td>
										</tr>
									</table>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="3">
								<div style="text-align: center;">
									<input type="button" value="确定" onclick="sub()" class="btn3">
									<input type="button" value="返回" onclick="back()" class="btn3">
								</div>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</form>
</body>
</html>